<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户订单</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>

    <style>
        /*.el-row{*/
        /*    border: 1px solid red;*/
        /*}*/
        /*.el-col{*/
        /*    border: 1px solid yellow;*/
        /*}*/

        ::-webkit-scrollbar {
            /*滚动条隐藏*/
            display: none;
        }

        .orderPanel {
            /*panel边框颜色*/
            border-color: #458b74;
            border: 1px solid #458b74;
            box-shadow: 5px 5px 3px 0 #CCCCCC;
            margin-top: 30px;
            border-radius: 5px;
            padding-bottom: 10px;
        }

        .orderheading {
            /*自定义panel颜色*/
            background-color: #458b74ee;
            height: 40px;
            line-height: 40px;
            padding: 5px 10px;
            overflow:auto;
            border-radius: 5px 5px 0 0;
        }

        .orderheading > span {
            color: #dff0d8;
        }
        .orderheading > button, .orderheading > div {
            float: right;
        }

        td, th {
            /*如果单元格内容过长,隐藏,显示...*/
            overflow: hidden;
            white-space: pre-line;
            text-overflow: ellipsis;
        }

        .storeImg{
            height: 60px;
            width: 60px;
            float: left;
            border-radius: 50%;
            border: 2px solid #458b74;
            box-sizing: border-box;"
        }

        .cursorPointer{
            cursor: pointer;
        }

        .storeBlock {
            height: 60px;
            background-color: #dff0d8;
            transition: background-color 0.5s;
        }

        .storeBlock:hover {
            background-color: #afe1b8;
        }

        .storeBlock2 {
            height: 60px;
            width: 100%;
            float: left;
            border-radius: 30px 0 0 30px;
            background: linear-gradient(to right, #458b74, #dff0d8, #fff);
        }

        .cursorStyle-def {
            /*未支付/已取消, 光标:默认*/
            /*放在下方,可以覆盖storeBlock的优先级*/
            cursor: default;
        }

        #reviewMain el-row{
            padding: 5px;
            margin:5px;
        }
    </style>
</head>
<body>

<!--order:0未⽀付 1已支付 2已取消-->
<!--item:0未⽀付 1已支付 2已取消 3退款中 4已退款 5已签收 6已评论-->

<el-container id="app">
<!--我的订单头部-->
    <el-header>
        <el-row>
            <el-col :span="20" :offset="2" style="text-align: center;font-size: 30px;">
                <h1><b style="font-family: 仿宋" >我的订单</b></h1>
            </el-col>
        </el-row>
    </el-header>
<!--无订单显示-->
    <el-main v-if="orderList.length<=0">
        <el-empty description="还没有任何订单,快去购买吧~"></el-empty>
    </el-main>

    <!-- 页面主体 -->
    <el-main v-if="orderList.length>0">
        <el-row>
            <el-col :span="20" :offset="2">
                <!--一个订单-->
                <div v-for="orderIdItemsVo in orderList" class="orderPanel" >
                    <!--订单头部-->
                    <div class="orderheading" >
                        <span>序号:&nbsp;{{orderIdItemsVo.order.id}}&nbsp;&nbsp;&nbsp;&nbsp;订单编号:&nbsp;{{orderIdItemsVo.order.orderNum}}&nbsp;&nbsp;&nbsp;&nbsp;下单时间:&nbsp;{{orderIdItemsVo.order.createTime}}&nbsp;&nbsp;&nbsp;&nbsp;总金额:&nbsp;{{orderIdItemsVo.order.totalPrice}}&nbsp;元</span>
                        <!--order状态(0未⽀付,取消(按钮) 1已支付 2已取消(手动,自动)-->
                        <el-button type="warning" plain v-if="orderIdItemsVo.order.status == 1" @click="updateItemStatus(orderIdItemsVo)">确认退款</el-button>
                    </div>

                    <!--订单主体-->
<!--                    <div v-for="orderItemVos in orderIdItemsVo.orderItemVos">-->
                        <div>
                            <!-- 数据显示 -->
                            <el-table
                                    :data="orderIdItemsVo.orderItemVos"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        label="图片"
                                        min-width="20%">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.product.productImg"
                                             width="60" height="60"/>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="product.productName"
                                        label="名称"
                                        min-width="20%">
                                </el-table-column>
                                <el-table-column
                                        prop="item.buyCount"
                                        label="购买数量"
                                        min-width="20%">
                                </el-table-column>
                                <el-table-column
                                        prop="item.sumPrice"
                                        label="金额"
                                        min-width="20%">
                                </el-table-column>

                            </el-table>
                        </div>
<!--                    </div>-->

                </div>

            </el-col>
        </el-row>
    </el-main>
<!--页码-->
    <el-footer v-if="orderList.length>0">
        <!-- 页码 -->
        <el-row>
            <el-col :span="20" :offset="2">
                <el-pagination
                        style="text-align: center;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        hide-on-single-page
                        background
                        :current-page="currentPage"
                        :page-sizes="[3, 5, 10, 20]"
                        :page-size="pageSize"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </el-footer>

</el-container>

<script>

    console.log(".........userOrder...........")

    new Vue({
        el: "#app"
        ,
        data: {
            orderList: [],  //数据
            currentPage: 1, //当前页
            pageSize: 3,    //每页条数
            total: 0,       //总条数
            totalPages: 0,  //总页数
            storeId: [[${storeId}]],     //当前店铺编号
        }
        ,
        methods: {
            handleSizeChange(pageSize) {
                //控制每页条数
                this.pageSize=pageSize;
            },
            handleCurrentChange(pageNum) {
                //控制页码
                // 小于1 或者 大于total 或者 仍获取当前页数据 直接返回
                if (pageNum < 1 || pageNum > this.totalPages || pageNum == this.currentPage) {
                    console.log(pageNum + " 无效页码值")
                    return;
                }
                this.currentPage = pageNum;
                this.initOrderList();
            },
            initOrderList() {
                // 查询订单分页
                let _this = this;
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    storeId: this.storeId
                }
                $.get("/item/selectItem", params, function (data) {
                    console.log(params)
                    console.log(params.storeId)
                    console.log(data)

                    _this.orderList = data.records;
                    console.log(data.records)
                    _this.currentPage = data.current;
                    _this.pageSize = data.size;
                    // 数据总量
                    _this.total = data.total;
                    console.log(data.total)
                    // 总页数
                    _this.totalPages = data.pages;
                    console.log(data.pages)
                })
            }
            ,
            updateItemStatus(orderIdItemsVo){
                console.log(orderIdItemsVo.orderItemVos)
                let params = {
                    // orderIdItemsVo:this.orderIdItemsVo
                    orderItemVos: orderIdItemsVo.orderItemVos,
                    // order:orderIdItemsVo.order
                }
                let _this = this;
                // $.post("/item/updateItemStatus", params, function () {
                //     // 状态修改完成后刷新页面数据
                //     _this.initOrderList();
                // })
                $.ajax({
                    url: "/item/updateItemStatus",
                    data: JSON.stringify(orderIdItemsVo.orderItemVos),
                    dataType: "text",
                    contentType: "application/json",
                    type: "POST",
                    success: function (data) {
                        console.log(data)
                        if(data!="ok"){     // 不成功
                            // alert(data)
                            _this.$message.warning(data);
                            // 已评价,关闭dialog
                            _this.reviewDialog=false;
                            _this.initOrderList();
                        }else{
                            alert("退款成功")
                            parent.location.href="/"
                        }
                    }
                });
            }
            ,
            toStoreMenu(storeId) {
                // 跳转商铺详情
                $(location).attr('href', '/store/toStoreMenu?storeId=' + storeId);
            }
        }
        ,
        created() {
            this.initOrderList();
        }
    });


</script>


</body>
</html>